<template>
  <div class="w-full h-full flex flex-col">
    <div class="w-full flex flex-row justify-between items-center">
      <div class="flex flex-row items-center">
        <el-select
          class="mr-w20"
          v-model="s_report.company_id"
          placeholder="请选择公司"
          @change="action_choise_company"
          clearable
        >
          <el-option
            v-for="item in s_report.list_company"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
        <el-select
          class="mr-w20"
          v-model="s_report.assess_id"
          placeholder="请选择报告"
          clearable
          @change="action_list_staff_assess"
        >
          <el-option
            v-for="item in s_report.list_assess"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
        <!-- <el-date-picker
          class="mr-w20"
          v-model="s_report.dateStr"
          type="date"
          placeholder="选择日期"
          value-format="timestamp"
          @change="action_list_staff_assess"
        >
        </el-date-picker> -->

        <el-date-picker
          class="mr-w20"
          v-model="s_report.dateStr"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="timestamp"
          @change="action_choise_date"
        >
        </el-date-picker>
      </div>
      <el-button
        type="primary"
        icon="el-icon-takeaway-box"
        class="bg-cmain"
        @click="action_export_assess"
        >导出
      </el-button>
    </div>
    <div class="w-full h-full mt-w20">
      <el-table
        :data="s_report.list_staff_assess"
        height="700"
        stripe
        style="width: 100%"
      >
        <el-table-column type="index" label="序号" min-width="10%">
        </el-table-column>
        <el-table-column prop="userName" label="员工姓名" min-width="10%">
        </el-table-column>
        <el-table-column prop="jobNum" label="工号" min-width="10%">
        </el-table-column>
        <el-table-column prop="companyName" label="公司名称" min-width="10%">
        </el-table-column>
        <el-table-column prop="departmentName" label="部门名称" min-width="10%">
        </el-table-column>
        <el-table-column prop="assessName" label="量表名称" min-width="30%">
        </el-table-column>
        <el-table-column prop="createTime" label="提交时间" min-width="10%">
        </el-table-column>
      </el-table>
      <div class="w-full flex items-end justify-center" style="height: 7%">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="s_report.m_page_a.total"
          :page-size="s_report.m_page_a.limit"
          @current-change="action_page_change"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script src="./Index.ts"></script>
<style src="./Index.less" lang="less" scoped>
</style>
